<template>
  <je-modal
    ref="viewModal"
    v-model:visible="visibleModule"
    :show-header="false"
    :show-footer="false"
    :resize="false"
    :esc-closable="false"
    :body-style="{ padding: 0 }"
    :title="$t('viewModal.title')"
    style="border-radius: 0"
    maximized
    @close="cancelModal"
  >
    <je-panel class="view-design" v-bind="lauoutOptions">
      <template #top>
        <div class="top-form">
          <je-form layout="inline">
            <je-form-item
              :label="$t('viewModal.nameLabel')"
              v-bind="validateInfos.tabelName"
              validate-type="tooltip"
              name="tabelName"
              :colon="false"
            >
              <je-input v-model:value="modelRef.tabelName" style="width: 300px" />
            </je-form-item>
            <je-form-item
              :label="$t('viewModal.codeLabel')"
              v-bind="validateInfos.tabelCode"
              validate-type="tooltip"
              :colon="false"
              name="tabelCode"
            >
              <je-input
                v-model:value="modelRef.tabelCode"
                style="width: 300px"
                :disabled="modalShow == 'update'"
              />
            </je-form-item>
            <je-button style="margin-left: 16px" @click="clickDdl">
              <template #icon><i class="jeicon jeicon-cylindrical"></i></template>
              {{ $t('viewModal.btnDdlText') }}
            </je-button>
            <je-button
              type="primary"
              style="margin-left: 16px"
              :loading="creatBtnLoading"
              @click="clickCreatView"
            >
              <template #icon><i class="fas fa-caret-right"></i></template>
              {{ $t('viewModal.btnCreateViewText') }}
            </je-button>
            <je-button
              class="btnClose"
              type="primary"
              style="margin-left: 16px"
              @click="clickClose"
            >
              {{ $t('btnCloseText') }}
            </je-button>
          </je-form>
        </div>
      </template>

      <template #default>
        <je-tabs
          v-model:activeKey="activeKey"
          :tab-position="tabPosition"
          class="design-tabs"
          @change="changeTabs"
        >
          <je-tab-pane key="design" :tab="$t('viewModal.TabDesignTitle')">
            <DesignView
              :table-id="modelRef.tableId"
              :design-datas="designDatas"
              :product-data="productData"
              @changeDatas="changeDatas"
              @chageCheckData="chageCheckData"
            />
          </je-tab-pane>
          <je-tab-pane key="concern" tab="关系设置">
            <ConcernView :concern-datas="concernDatas" @getConcernTable="getConcernTable" />
          </je-tab-pane>
          <je-tab-pane key="relation" :tab="$t('viewModal.TabRelationTitle')">
            <OutputView
              ref="$outputView"
              :out-put-data="outPutData"
              :select-table-datas="concernDatas.selectDatas"
              @setChangeType="setChangeType"
              @getOutputView="getOutputView"
            />
          </je-tab-pane>
          <je-tab-pane key="DDL" :tab="$t('viewModal.TabDdlTitle')">
            <je-panel v-bind="tabOptions">
              <template #top><div class="ddl-title"> DDL语句 </div> </template>
              <template #default>
                <TableDdl :view-sql="modelDatas.viewSql" />
              </template>
            </je-panel>
          </je-tab-pane>
          <je-tab-pane v-if="modelRef.tableId != ''" key="SQL" :tab="$t('viewModal.TabSqlTitle')"
            ><TableSql :tab-key="modelRef.tableId" :product-data="productData" />
          </je-tab-pane>
        </je-tabs>
      </template>
    </je-panel>
  </je-modal>
  <UpdateViewKey
    v-if="modelDatas.pkValueOptions.length >= 2"
    :modal-show="modelDatas.pkValueOptions.length >= 2"
    :modal-data="modelDatas.pkValueOptions"
    :checked-code="modelDatas.pkValue"
    @changePkValue="changePkValue"
  />
  <ViewDdl
    v-if="modelDatas.DdlSqlType && viewSql == ''"
    :modal-data="modelDatas.DdlSql"
    :view-sql="viewSql"
    :str-data="modelDatas.strData"
    @changeDdlValue="changeDdlValue"
  />
  <ComparisonDdl
    v-if="modelDatas.DdlSqlType && viewSql != ''"
    :modal-data="modelDatas.DdlSql"
    :view-sql="viewSql"
    :old-translate="modelDatas.oldTranslate"
    :str-data="modelDatas.strData"
    @changeDdlValue="changeDdlValue"
  />
</template>
<script>
  import { defineComponent, ref, onMounted, reactive } from 'vue';
  import { Input, Modal, Panel, Button, Tabs, Form } from '@jecloud/ui';
  import { loadUserTable, generateViewDdl, saveTableByView, updateView } from '../../api/index';
  import DesignView from './design.vue';
  import OutputView from './output.vue';
  import ConcernView from './concern.vue';
  import TableDdl from '../table-ddl/index.vue';
  import TableSql from '../table-sql/index.vue';
  import UpdateViewKey from './modal/updateViewkey.vue';
  import ViewDdl from './modal/view-ddl.vue';
  import ComparisonDdl from './modal/comparison-ddl.vue';
  import { verifyData } from '../../helper/common';
  import { cloneDeep } from '@jecloud/utils';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ViewDesign',
    components: {
      JeModal: Modal,
      JePanel: Panel,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeButton: Button,
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
      DesignView,
      OutputView,
      ConcernView,
      TableDdl,
      TableSql,
      UpdateViewKey,
      ViewDdl,
      ComparisonDdl,
    },
    props: {
      modalShow: {
        type: String,
        default: '',
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //关闭弹窗
      const $outputView = ref(null);
      const creatBtnLoading = ref(false);
      const viewModal = ref(null);
      const visibleModule = ref(true);
      const concernDatas = reactive({
        selectDatas: [], //下拉框数据
        tabelData: [],
      });
      const designDatas = reactive({ tableDatas: [], tableCodes: [], lineinfo: [] });
      //输出视图数据
      const outPutData = ref([]);

      //sql数据
      const viewSql = ref(props.modalData.RESOURCETABLE_SQL);

      const tableDataTypes = reactive({ concern: false, output: false });

      const modelDatas = reactive({
        pkValueOptions: [],
        pkValue: '',
        DdlSql: props.modalData.RESOURCETABLE_SQL,
        DdlSqlType: false,
        strData: '',
        viewSql: props.modalData.RESOURCETABLE_SQL,
        translate: props.modalData.RESOURCETABLE_RELATION_DESC,
        oldTranslate: props.modalData.RESOURCETABLE_RELATION_DESC,
      });

      const modelRef = reactive({
        tableId: props.modalShow == 'update' ? props.modalData.JE_CORE_RESOURCETABLE_ID : '',
        tabelName: props.modalShow == 'update' ? props.modalData.RESOURCETABLE_TABLENAME : '',
        tabelCode: props.modalShow == 'update' ? props.modalData.RESOURCETABLE_TABLECODE : '',
      });

      //表单信息初始化
      const rulesRef = reactive({
        tabelName: verifyData.name,
        tabelCode: verifyData.code,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });

      const activeKey = ref('design');
      const tabPosition = ref('bottom');
      const changeTabs = function (check) {
        activeKey.value = check;
      };

      const clickClose = () => {
        viewModal.value.close();
      };

      const cancelModal = () => {
        if (props.modalShow == 'update') {
          emit('changeData', 'add', {
            title: modelRef.tabelName.trim(),
            key: props.modalData.JE_CORE_RESOURCETABLE_ID,
          });
        } else {
          emit('changeData', 'cancel');
        }
      };

      onMounted(() => {
        loadOutputData();
      });

      //加载输出视图的数据
      const loadOutputData = () => {
        if (modelRef.tableId != '' && modelRef.tableId != undefined) {
          loadUserTable({
            tableCode: 'JE_CORE_TABLECOLUMN',
            limit: -1,
            j_query: JSON.stringify({
              custom: [
                {
                  type: '=',
                  code: 'TABLECOLUMN_RESOURCETABLE_ID',
                  value: modelRef.tableId,
                },
              ],
              order: [{ code: 'SY_ORDERINDEX', type: 'asc' }],
            }),
          })
            .then((data) => {
              const tabelData = [];
              data.data.rows.forEach((item) => {
                if (item.TABLECOLUMN_VIEWCONFIG) {
                  tabelData.push(JSON.parse(item.TABLECOLUMN_VIEWCONFIG));
                }
              });
              //封装视图列表回显选中字段的数据
              const designChecked = {};
              tabelData.forEach((item) => {
                const key = item.tableCode;
                if (typeof designChecked[key] != 'object') {
                  designChecked[key] = [];
                }
                designChecked[key].push(item.value.split('.')[1]);
              });
              outPutData.value = tabelData;
              loadConcernData(designChecked);
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        }
      };

      //加载关系设置数据
      const loadConcernData = (designChecked) => {
        if (modelRef.tableId != '' && modelRef.tableId != undefined) {
          loadUserTable({
            tableCode: 'JE_CORE_VIEWCASCADE',
            limit: -1,
            j_query: JSON.stringify({
              custom: [
                {
                  type: '=',
                  code: 'JE_CORE_RESOURCETABLE_ID',
                  value: modelRef.tableId,
                },
              ],
            }),
          })
            .then((data) => {
              const tabelData = [];
              const viewinfo = [];
              const lineinfo = [];
              data.data.rows.forEach((item, index) => {
                //封装列表数据
                tabelData.push({
                  id: item.JE_CORE_VIEWCASCADE_ID,
                  mainTableCode: item.VIEWCASCADE_YBBM,
                  mainTableId: item.VIEWCASCADE_YBID,
                  mainTableName: item.VIEWCASCADE_YBBMC,
                  mainColumn: item.VIEWCASCADE_YBZD,
                  mainIdentifier: item.VIEWCASCADE_YBBS,
                  targetTableCode: item.VIEWCASCADE_MBBBM,
                  targetTableId: item.VIEWCASCADE_ZBID,
                  targetTableName: item.VIEWCASCADE_ZBBMC,
                  targetColumn: item.VIEWCASCADE_MBBZD,
                  targetIdentifier: item.VIEWCASCADE_ZBBZ,
                  formula: item.VIEWCASCADE_GLGX_CODE,
                  isDispalyLine: item.VIEWCASCADE_SFXSX == '1',
                });
                //连线数据组装
                if (item.VIEWCASCADE_SFXSX == '1') {
                  lineinfo.push({
                    mainTableId: item.VIEWCASCADE_YBID,
                    mainIdentifier: item.VIEWCASCADE_YBBS,
                    targetTableId: item.VIEWCASCADE_ZBID,
                    targetIdentifier: item.VIEWCASCADE_ZBBZ,
                    isDispalyLine: item.VIEWCASCADE_SFXSX == '1',
                  });
                }
              });
              const coordinate = JSON.parse(props.modalData.RESOURCETABLE_COORDINATE);
              if (coordinate.length > 0) {
                coordinate.forEach((item) => {
                  concernDatas.selectDatas.push({
                    tableCode: item.tableCode,
                    tableId: item.tableId,
                    tableName: item.tableName,
                    value: item.tableCode,
                    label: item.tableName,
                  });
                  item.queryType = 'PRO,SYS';
                  item.selectCode = designChecked[item.tableCode];
                  viewinfo.push(item);
                });
              }
              concernDatas.tabelData = tabelData;
              designDatas.tableDatas = viewinfo;
              designDatas.lineinfo = lineinfo;
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        }
      };

      const changeDatas = (type, data) => {
        if (type == 'concernSelectData') {
          concernDatas.selectDatas.push(data);
        }
        if (type == 'delConcernSelectData') {
          concernDatas.selectDatas.forEach((item, index) => {
            if (item.tableId == data.tableId) {
              concernDatas.selectDatas.splice(index, 1);
            }
          });
        }
      };

      //关系设置table对象
      const getConcernTable = (obj) => {
        concernDatas.tableObj = obj;
      };
      //关系设置table对象
      const getOutputView = (obj) => {
        concernDatas.outputTableObj = obj;
      };

      const setChangeType = () => {
        tableDataTypes.output = true;
      };

      //监听设计视图table选中事件

      const chageCheckData = (data, records) => {
        setChangeType();
        if (!$outputView.value) {
          if (data.type == 'add' && records.length > 0) {
            outPutData.value = outPutData.value.concat(records);
          } else if (data.type == 'addAll') {
            //先删除
            for (let index = 0; index < outPutData.value.length; index++) {
              const item = outPutData.value[index];
              if (item.tableCode == data.tableCode) {
                outPutData.value.splice(index, 1);
                index--;
              }
            }
            //在添加
            records.forEach((rec) => {
              var obj = {
                value: data.tableCode + '.' + rec.TABLECOLUMN_CODE,
                tableCode: data.tableCode,
                tableName: data.tableName,
                column: rec.TABLECOLUMN_CODE,
                name: rec.TABLECOLUMN_NAME,
                dataType: rec.TABLECOLUMN_TYPE,
                length: rec.TABLECOLUMN_LENGTH,
                grouping: false,
                sort: '',
                formula: '',
                whereColum: '',
              };
              outPutData.value.push(obj);
            });
          } else if (data.type == 'delete' && records.length > 0) {
            for (let index = 0; index < outPutData.value.length; index++) {
              const item = outPutData.value[index];
              if (records.indexOf(item.value) != -1) {
                outPutData.value.splice(index, 1);
                index--;
              }
            }
          } else if (data.type == 'deleteTable') {
            for (let index = 0; index < outPutData.value.length; index++) {
              const item = outPutData.value[index];
              if (item.tableCode == data.tableCode) {
                outPutData.value.splice(index, 1);
                index--;
              }
            }
          }
        } else {
          $outputView.value?.doUpdateTableData(data, records);
        }
      };

      //生成DDL
      const clickDdl = function () {
        //表单验证
        validate()
          .then(() => {
            const coordData = getTableCoordData();
            let outPutTableData = outPutData.value;
            if (concernDatas.outputTableObj) {
              outPutTableData = concernDatas.outputTableObj.getData();
            }
            if (coordData.length <= 0) {
              Modal.alert('请为设计视图添加表！', 'warning');
              return;
            }
            if (outPutTableData.length <= 0) {
              Modal.alert('输出视图为空,请勾选列表字段！', 'warning');
              return;
            }
            if (tableDataTypes.output) {
              tableDataTypes.output = false;
            }
            let design = new Array();
            design = concernDatas.tabelData;
            if (concernDatas.tableObj != undefined) {
              design = concernDatas.tableObj.getTableData().fullData;
              const { insertRecords, removeRecords, updateRecords } =
                concernDatas.tableObj.getRecordset();
              if (
                insertRecords.length > 0 ||
                removeRecords.length > 0 ||
                updateRecords.length > 0
              ) {
                tableDataTypes.concern = false;
                concernDatas.tableObj.loadData(design);
              }
            }
            const tableItemDoms = document
              .getElementById('diagramContainer')
              .getElementsByClassName('table-item');
            if (design.length <= 0 && tableItemDoms.length > 1) {
              Modal.alert('关系设置为空,请配置！', 'warning');
              return;
            }
            modelDatas.pkValueOptions = [];
            //主键验证唯一
            outPutTableData.forEach((item) => {
              if (item.dataType == 'ID') {
                let label = item.column;
                if (item.tableName) {
                  label += '（' + item.tableName + '）';
                }
                modelDatas.pkValueOptions.push({
                  value: item.column,
                  label,
                });
              }
            });
            if (modelDatas.pkValueOptions.length <= 1) {
              modelDatas.pkValue = modelDatas.pkValueOptions[0]
                ? modelDatas.pkValueOptions[0].value
                : '';
              createDdl();
            }
          })
          .catch((error) => {
            //console.log('error', error);
          });
      };

      //主键选择
      const changePkValue = (value) => {
        modelDatas.pkValueOptions = [];
        if (value == 'cancel') {
          return;
        }
        modelDatas.pkValue = value;
        createDdl();
      };

      //调用DDL接口
      const createDdl = () => {
        //关系设置数据处理
        let design = cloneDeep(concernDatas.tabelData);
        if (concernDatas.tableObj != undefined) {
          design = cloneDeep(concernDatas.tableObj.getTableData().tableData);
        }
        design.forEach((item) => {
          item.isDispalyLine = item.isDispalyLine ? 1 : 0;
          delete item.disabled;
          delete item._X_ID;
        });
        //输出视图数据处理
        //主键数据
        modelDatas.pkValueOptions = [];
        let outPutTableData = outPutData.value;
        if (concernDatas.outputTableObj) {
          outPutTableData = concernDatas.outputTableObj.getTableData().fullData;
        }
        let outPut = cloneDeep(outPutTableData);
        const params = {
          viewCode: modelRef.tabelCode.trim(),
          masterTableId: modelDatas.pkValue,
          viewColumn: design,
          viewOuput: outPut,
        };
        modelDatas.strData = JSON.stringify(params);
        //调到DDL生成接口
        generateViewDdl({ strData: modelDatas.strData })
          .then((data) => {
            modelDatas.DdlSql = data.data;
            modelDatas.DdlSqlType = true;
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      //DDL修改后确认数据
      const changeDdlValue = (val, translate) => {
        modelDatas.DdlSqlType = false;
        if (val == 'cancel') {
          return;
        }
        modelDatas.translate = translate;
        modelDatas.DdlSql = val;
        modelDatas.viewSql = val;
      };

      //创建视图
      const clickCreatView = () => {
        creatBtnLoading.value = true;
        if (
          modelDatas.strData == '' ||
          modelDatas.strData == undefined ||
          modelDatas.viewSql == '' ||
          modelDatas.viewSql == undefined
        ) {
          Modal.alert('请先点击生成DDL！', 'warning');
          creatBtnLoading.value = false;
          return;
        }
        if (concernDatas.tableObj != undefined) {
          const concernTable = concernDatas.tableObj;
          const { insertRecords, removeRecords, updateRecords } = concernTable.getRecordset();
          if (insertRecords.length > 0 || removeRecords.length > 0 || updateRecords.length > 0) {
            tableDataTypes.concern = true;
            Modal.alert('数据有改动,请先点击生成DDL！', 'warning');
            creatBtnLoading.value = false;
            return;
          }
        }
        if (tableDataTypes.output) {
          Modal.alert('数据有改动,请先点击生成DDL！', 'warning');
          creatBtnLoading.value = false;
          return;
        }
        //调到创建视图接口
        const params = {
          RESOURCETABLE_TABLENAME: modelRef.tabelName.trim(),
          RESOURCETABLE_TABLECODE: modelRef.tabelCode.trim(),
          RESOURCETABLE_SQL: modelDatas.viewSql,
          SY_PARENT: props.modalData.JE_CORE_RESOURCETABLE_ID,
          strData: modelDatas.strData,
          SY_PRODUCT_ID: props.productData.productId,
          RESOURCETABLE_RELATION_DESC: modelDatas.translate,
        };

        const coordData = getTableCoordData();
        if (coordData.length > 0) {
          params.RESOURCETABLE_COORDINATE = JSON.stringify(coordData);
        }
        //修改视图
        if (modelRef.tableId != '' && modelRef.tableId != undefined) {
          params.JE_CORE_RESOURCETABLE_ID = modelRef.tableId;
          params.tableCode = 'JE_CORE_RESOURCETABLE';
          delete params.SY_PARENT;
          updateView(params, { pd: props.productData.productCode })
            .then((data) => {
              creatBtnLoading.value = false;
              viewModal.value.close();
              Modal.notice(data.message, 'success');
            })
            .catch((e) => {
              creatBtnLoading.value = false;
              Modal.alert(e.message, 'error');
            });
        } else {
          //添加视图
          params.RESOURCETABLE_ICON = 'jeicon jeicon-process';
          saveTableByView(params, { pd: props.productData.productCode })
            .then((data) => {
              emit('changeData', 'checked', {
                id: data.data.JE_CORE_RESOURCETABLE_ID,
                text: data.data.RESOURCETABLE_TABLENAME,
                code: data.data.RESOURCETABLE_TABLECODE,
                nodeInfo: data.data.RESOURCETABLE_TYPE,
                parent: {
                  id: props.modalData.JE_CORE_RESOURCETABLE_ID,
                },
              });
              creatBtnLoading.value = false;
              viewModal.value.close();
              Modal.notice(data.message, 'success');
            })
            .catch((e) => {
              creatBtnLoading.value = false;
              Modal.alert(e.message, 'error');
            });
        }
      };

      //获得各个table的坐标数据
      const getTableCoordData = () => {
        let dataArray = [];
        const tableItemDoms = document
          .getElementById('diagramContainer')
          .getElementsByClassName('table-item');
        if (tableItemDoms.length > 0) {
          for (let index = 0; index < tableItemDoms.length; index++) {
            const element = tableItemDoms[index];
            const data = JSON.parse(element.getAttribute('data-obj'));
            delete data.searchValue;
            delete data.queryType;
            delete data.selectCode;
            if (data.iconCls == undefined) {
              data.iconCls = 'jeicon jeicon-table';
            }
            data.top = element.style.top;
            data.left = element.style.left;
            dataArray.push(data);
          }
          return dataArray;
        } else {
          return [];
        }
      };

      return {
        viewModal,
        visibleModule,
        modelRef,
        validateInfos,
        activeKey,
        tabPosition,
        clickClose,
        cancelModal,
        changeTabs,
        changeDatas,
        concernDatas,
        getConcernTable,
        getOutputView,
        outPutData,
        chageCheckData,
        designDatas,
        viewSql,
        modelDatas,
        changeDdlValue,
        clickDdl,
        changePkValue,
        clickCreatView,
        tableDataTypes,
        setChangeType,
        lauoutOptions: { top: { size: 60 } },
        tabOptions: { top: { size: 40 } },
        creatBtnLoading,
        $outputView,
      };
    },
  });
</script>
<style lang="less" scoped>
  .view-design {
    .layout.top {
      line-height: 60px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }
    .design-tabs {
      height: 100%;
      .ddl-title {
        height: 40px;
        background: #f7f9fc;
        line-height: 40px;
        font-size: 14px;
        padding: 0 16px;
        color: #3265f5;
        border-top: 1px solid #e6e6e6;
      }
    }
  }
</style>
<style lang="less">
  // .full-modal {
  //   .ant-modal.view-design {
  //     max-width: 100%;
  //     top: 0;
  //     padding-bottom: 0;
  //     margin: 0;
  //   }
  .view-design {
    .je-grid {
      .vxe-table--render-default .vxe-header--column.col--ellipsis,
      .vxe-table--render-default .vxe-body--column.col--ellipsis,
      .vxe-table--render-default .vxe-footer--column.col--ellipsis {
        height: 32px !important;
      }
    }
    .top-form {
      height: 100%;
      //border-bottom: 1px solid #e6e6e6;
      padding: 20px;
      line-height: 60px;
      display: flex;
      align-items: center;
      position: relative;
      .btnClose {
        position: absolute;
        right: 20px;
      }
    }
    .design-tabs {
      .vxe-table--render-default .vxe-table--border-line {
        border: 0;
      }
      .ant-tabs-nav {
        margin-top: 0 !important;
        border-top: 1px solid #e6e6e6;
      }
      .ant-tabs-content {
        height: 100%;
        .sql-table {
          //height: calc(100vh - 480px) !important;
          .sql-title.bottom {
            border-bottom: 1px solid #e6e6e6;
          }
        }
        .table-sql {
          .sql-title.bottom {
            border-bottom: 1px solid #e6e6e6;
          }
          .sql-title.top {
            border-top: 1px solid #e6e6e6;
          }
        }
        .table-ddl {
          border-top: 1px solid #e6e6e6;
        }
      }
      .ant-tabs-nav-wrap {
        border-top: 0px !important;
        height: 40px;
        .ant-tabs-nav-list {
          .ant-tabs-tab {
            padding: 12px 22px;
          }
          .ant-tabs-tab + .ant-tabs-tab {
            margin: 0 0 0 0;
          }
          .ant-tabs-tab.ant-tabs-tab-active {
            background: @primary-color;
            .ant-tabs-tab-btn {
              color: #ffffff;
            }
          }
          .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
            height: 0px;
          }
        }
      }
      .ant-tabs-nav::before {
        border: 0 !important;
      }
    }
    /* .table-ddl {
      height: calc(100vh - 154px) !important;
    } */
    .je-panel .je-panel-item-region-default .vxe-table {
      border-right: 1px solid #e6e6e6;
    }
    .je-panel-bar-tbar {
      .je-tree-search-wrapper {
        height: 39px !important;
        .ant-select {
          height: 100%;
          .ant-select-selector {
            height: 100%;
            .ant-select-selection-search-input {
              height: 100%;
            }
          }
        }
      }
    }
  }
  // }
</style>
